<template>
  <div class="container" @click="handleGallary">
    <div class="wrapper">
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item,index) in imgs" :key="index">
     <img class="gallary-img"  :src="item" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper> 
    </div>
  </div>
</template>
<script>
export default {
 name:"commonGallary",
 props:{
   imgs:{
     type:Array,
     default(){
      return [ 
      ]
     }
   }
 },
 methods:{
   handleGallary(){
      this.$emit("close");
   }
 },
 data(){
  return {
    swiperOptions:{
       pagination:".swiper-pagination",
       paginationType:"fraction",
       observeParents:true,
        observer:true
    }
  }
 }
}
</script>

<style lang="stylus" scoped>
 .container >>>.swiper-container 
  overflow:inherit
 .container
  position:fixed
  display:flex
  left:0
  flex-direction :column
  justify-content:center
  background:#000
  right:0
  top:0
  bottom:0
  z-index:99
  .wrapper
   background:#fff
   height:0
   width:100%
   background:#fff
   padding-bottom:68%
   .gallary-img
    width:100%
   .swiper-pagination
    color:#fff
    bottom:-1rem
</style>